Update v3.6.7

> Fixed Schedule

1 files changed, 233 insertions, 236 deletions

diff --git a/pages/id/anime/watch/[...info].js b/pages/id/anime/watch/[...info].js
index 89fd3a6..06269ab 100644
--- a/pages/id/anime/watch/[...info].js
+++ b/pages/id/anime/watch/[...info].js
@@ -7,7 +7,7 @@ import dynamic from "next/dynamic";
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "../../../api/auth/[...nextauth]";
 
-import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
+import Skeleton from "react-loading-skeleton";
 
 import { Navigasi } from "../..";
 import { ChevronDownIcon, ForwardIcon } from "@heroicons/react/24/solid";
@@ -198,261 +198,258 @@ export default function Info({ sessions, id, aniId, provider, api, proxy }) {
         <title>{playingTitle || "Loading..."}</title>
       </Head>
 
-      <SkeletonTheme baseColor="#232329" highlightColor="#2a2a32">
-        <div className="bg-primary">
-          <Navigasi />
-          <div className="min-h-screen mt-3 md:mt-0 flex flex-col lg:gap-0 gap-5 lg:flex-row lg:py-10 lg:px-10 justify-start w-screen">
-            <div className="w-screen lg:w-[67%]">
-              {loading ? (
-                Array.isArray(epiData) ? (
-                  <div className="aspect-video z-20 bg-black">
-                    <VideoPlayer
-                      key={id}
-                      data={epiData}
-                      id={aniId}
-                      progress={parseInt(playingEpisode)}
-                      session={sessions}
-                      aniId={parseInt(data?.id)}
-                      stats={statusWatch}
-                      op={skip.op}
-                      ed={skip.ed}
-                      title={playingTitle}
-                      poster={poster[0]?.image}
-                      proxy={proxy}
-                    />
-                  </div>
-                ) : (
-                  <div className="aspect-video bg-black flex-center select-none">
-                    <p className="lg:p-0 p-5 text-center">
-                      Whoops! Something went wrong. Please reload the page or
-                      try other sources. {`:(`}
-                    </p>
-                  </div>
-                )
+      <div className="bg-primary">
+        <Navigasi />
+        <div className="min-h-screen mt-3 md:mt-0 flex flex-col lg:gap-0 gap-5 lg:flex-row lg:py-10 lg:px-10 justify-start w-screen">
+          <div className="w-screen lg:w-[67%]">
+            {loading ? (
+              Array.isArray(epiData) ? (
+                <div className="aspect-video z-20 bg-black">
+                  <VideoPlayer
+                    key={id}
+                    data={epiData}
+                    id={aniId}
+                    progress={parseInt(playingEpisode)}
+                    session={sessions}
+                    aniId={parseInt(data?.id)}
+                    stats={statusWatch}
+                    op={skip.op}
+                    ed={skip.ed}
+                    title={playingTitle}
+                    poster={poster[0]?.image}
+                    proxy={proxy}
+                  />
+                </div>
               ) : (
-                <div className="aspect-video bg-black" />
-              )}
-              <div>
-                {data && data?.episodes.length > 0 ? (
-                  data.episodes
-                    .filter((items) => items.number == currentNumber)
-                    .map((item, index) => (
-                      <div className="flex justify-between" key={item.id}>
-                        <div className="p-3 grid gap-2 w-[60%]">
-                          <div className="text-xl font-outfit font-semibold line-clamp-1">
-                            <Link
-                              href={`/id/anime/${data.id}`}
-                              className="inline hover:underline"
-                            >
-                              {item.title ||
-                                data.title.romaji ||
-                                data.title.english}
-                            </Link>
-                          </div>
-                          <h4 className="text-sm font-karla font-light">
-                            Episode {item.number}
-                          </h4>
-                        </div>
-                        <div className="w-[50%] flex gap-4 items-center justify-end px-4">
-                          <div className="relative">
-                            <select
-                              className="flex items-center gap-5 rounded-[3px] bg-secondary py-1 px-3 pr-8 font-karla appearance-none cursor-pointer"
-                              value={item.number}
-                              onChange={(e) => {
-                                const selectedEpisode = data.episodes.find(
-                                  (episode) =>
-                                    episode.number === parseInt(e.target.value)
-                                );
-                                router.push(
-                                  `/id/anime/watch/${selectedEpisode.id}/${data.id}`
-                                );
-                              }}
-                            >
-                              {data.episodes.map((episode) => (
-                                <option
-                                  key={episode.number}
-                                  value={episode.number}
-                                >
-                                  Episode {episode.number}
-                                </option>
-                              ))}
-                            </select>
-                            <ChevronDownIcon className="absolute right-2 top-1/2 transform -translate-y-1/2 w-5 h-5 pointer-events-none" />
-                          </div>
-                          <button
-                            className={`${
-                              item.number === data.episodes.length
-                                ? "pointer-events-none"
-                                : ""
-                            } relative group`}
-                            onClick={() => {
-                              const currentEpisodeIndex =
-                                data.episodes.findIndex(
-                                  (episode) => episode.number === item.number
-                                );
-                              if (
-                                currentEpisodeIndex !== -1 &&
-                                currentEpisodeIndex < data.episodes.length - 1
-                              ) {
-                                const nextEpisode =
-                                  data.episodes[currentEpisodeIndex + 1];
-                                router.push(
-                                  `/id/anime/watch/${nextEpisode.id}/${data.id}`
-                                );
-                              }
-                            }}
+                <div className="aspect-video bg-black flex-center select-none">
+                  <p className="lg:p-0 p-5 text-center">
+                    Whoops! Something went wrong. Please reload the page or try
+                    other sources. {`:(`}
+                  </p>
+                </div>
+              )
+            ) : (
+              <div className="aspect-video bg-black" />
+            )}
+            <div>
+              {data && data?.episodes.length > 0 ? (
+                data.episodes
+                  .filter((items) => items.number == currentNumber)
+                  .map((item, index) => (
+                    <div className="flex justify-between" key={item.id}>
+                      <div className="p-3 grid gap-2 w-[60%]">
+                        <div className="text-xl font-outfit font-semibold line-clamp-1">
+                          <Link
+                            href={`/id/anime/${data.id}`}
+                            className="inline hover:underline"
                           >
-                            <span className="absolute z-[9999] -left-11 -top-14 p-2 shadow-xl rounded-md transform transition-all whitespace-nowrap bg-secondary lg:group-hover:block group-hover:opacity-1 hidden font-karla font-bold">
-                              Next Episode
-                            </span>
-                            <ForwardIcon className="w-6 h-6" />
-                          </button>
+                            {item.title ||
+                              data.title.romaji ||
+                              data.title.english}
+                          </Link>
                         </div>
+                        <h4 className="text-sm font-karla font-light">
+                          Episode {item.number}
+                        </h4>
                       </div>
-                    ))
-                ) : (
-                  <div className="p-3 grid gap-2">
-                    <div className="text-xl font-outfit font-semibold line-clamp-2">
-                      <div className="inline hover:underline">
-                        <Skeleton width={240} />
-                      </div>
-                    </div>
-                    <h4 className="text-sm font-karla font-light">
-                      <Skeleton width={75} />
-                    </h4>
-                  </div>
-                )}
-                <div className="h-[1px] bg-[#3b3b3b]" />
-
-                <div className="px-4 pt-7 pb-4 h-full flex">
-                  <div className="aspect-[9/13] h-[240px]">
-                    {data ? (
-                      <Image
-                        src={data.image}
-                        alt="Anime Cover"
-                        width={1000}
-                        height={1000}
-                        priority
-                        className="object-cover aspect-[9/13] h-[240px] rounded-md"
-                      />
-                    ) : (
-                      <Skeleton height={240} />
-                    )}
-                  </div>
-                  <div className="grid w-full px-5 gap-3 h-[240px]">
-                    <div className="grid grid-cols-2 gap-1 items-center">
-                      <h2 className="text-sm font-light font-roboto text-[#878787]">
-                        Studios
-                      </h2>
-                      <div className="row-start-2">
-                        {data ? data.studios : <Skeleton width={80} />}
-                      </div>
-                      <div className="hidden xxs:grid col-start-2 place-content-end relative">
-                        <div>
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            strokeWidth={1.5}
-                            stroke="currentColor"
-                            className="w-8 h-8 hover:fill-white hover:cursor-pointer"
+                      <div className="w-[50%] flex gap-4 items-center justify-end px-4">
+                        <div className="relative">
+                          <select
+                            className="flex items-center gap-5 rounded-[3px] bg-secondary py-1 px-3 pr-8 font-karla appearance-none cursor-pointer"
+                            value={item.number}
+                            onChange={(e) => {
+                              const selectedEpisode = data.episodes.find(
+                                (episode) =>
+                                  episode.number === parseInt(e.target.value)
+                              );
+                              router.push(
+                                `/id/anime/watch/${selectedEpisode.id}/${data.id}`
+                              );
+                            }}
                           >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"
-                            />
-                          </svg>
+                            {data.episodes.map((episode) => (
+                              <option
+                                key={episode.number}
+                                value={episode.number}
+                              >
+                                Episode {episode.number}
+                              </option>
+                            ))}
+                          </select>
+                          <ChevronDownIcon className="absolute right-2 top-1/2 transform -translate-y-1/2 w-5 h-5 pointer-events-none" />
                         </div>
+                        <button
+                          className={`${
+                            item.number === data.episodes.length
+                              ? "pointer-events-none"
+                              : ""
+                          } relative group`}
+                          onClick={() => {
+                            const currentEpisodeIndex = data.episodes.findIndex(
+                              (episode) => episode.number === item.number
+                            );
+                            if (
+                              currentEpisodeIndex !== -1 &&
+                              currentEpisodeIndex < data.episodes.length - 1
+                            ) {
+                              const nextEpisode =
+                                data.episodes[currentEpisodeIndex + 1];
+                              router.push(
+                                `/id/anime/watch/${nextEpisode.id}/${data.id}`
+                              );
+                            }
+                          }}
+                        >
+                          <span className="absolute z-[9999] -left-11 -top-14 p-2 shadow-xl rounded-md transform transition-all whitespace-nowrap bg-secondary lg:group-hover:block group-hover:opacity-1 hidden font-karla font-bold">
+                            Next Episode
+                          </span>
+                          <ForwardIcon className="w-6 h-6" />
+                        </button>
                       </div>
                     </div>
-                    <div className="grid gap-1 items-center">
-                      <h2 className="text-sm font-light font-roboto text-[#878787]">
-                        Status
-                      </h2>
-                      <div>{data ? data.status : <Skeleton width={75} />}</div>
-                    </div>
-                    <div className="grid gap-1 items-center overflow-y-hidden">
-                      <h2 className="text-sm font-light font-roboto text-[#878787]">
-                        Titles
-                      </h2>
-                      <div className="grid grid-flow-dense grid-cols-2 gap-2 h-full w-full">
-                        {data ? (
-                          <>
-                            <div className="line-clamp-3">
-                              {data.title.romaji || ""}
-                            </div>
-                            <div className="line-clamp-3">
-                              {data.title.english || ""}
-                            </div>
-                            <div className="line-clamp-3">
-                              {data.title.native || ""}
-                            </div>
-                          </>
-                        ) : (
-                          <Skeleton width={200} height={50} />
-                        )}
-                      </div>
+                  ))
+              ) : (
+                <div className="p-3 grid gap-2">
+                  <div className="text-xl font-outfit font-semibold line-clamp-2">
+                    <div className="inline hover:underline">
+                      <Skeleton width={240} />
                     </div>
                   </div>
+                  <h4 className="text-sm font-karla font-light">
+                    <Skeleton width={75} />
+                  </h4>
                 </div>
-                <div className="flex flex-wrap gap-3 px-4 pt-3">
-                  {data &&
-                    data.genres.map((item, index) => (
-                      <div
-                        key={index}
-                        className="border border-action text-gray-100 py-1 px-2 rounded-md font-karla text-sm"
-                      >
-                        {item}
-                      </div>
-                    ))}
-                </div>
-                <div className={`bg-secondary rounded-md mt-3 mx-3`}>
-                  {data && (
-                    <p
-                      dangerouslySetInnerHTML={{ __html: data.description }}
-                      className={`p-5 text-sm font-light font-roboto text-[#e4e4e4] `}
+              )}
+              <div className="h-[1px] bg-[#3b3b3b]" />
+
+              <div className="px-4 pt-7 pb-4 h-full flex">
+                <div className="aspect-[9/13] h-[240px]">
+                  {data ? (
+                    <Image
+                      src={data.image}
+                      alt="Anime Cover"
+                      width={1000}
+                      height={1000}
+                      priority
+                      className="object-cover aspect-[9/13] h-[240px] rounded-md"
                     />
+                  ) : (
+                    <Skeleton height={240} />
                   )}
                 </div>
+                <div className="grid w-full px-5 gap-3 h-[240px]">
+                  <div className="grid grid-cols-2 gap-1 items-center">
+                    <h2 className="text-sm font-light font-roboto text-[#878787]">
+                      Studios
+                    </h2>
+                    <div className="row-start-2">
+                      {data ? data.studios : <Skeleton width={80} />}
+                    </div>
+                    <div className="hidden xxs:grid col-start-2 place-content-end relative">
+                      <div>
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          strokeWidth={1.5}
+                          stroke="currentColor"
+                          className="w-8 h-8 hover:fill-white hover:cursor-pointer"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="grid gap-1 items-center">
+                    <h2 className="text-sm font-light font-roboto text-[#878787]">
+                      Status
+                    </h2>
+                    <div>{data ? data.status : <Skeleton width={75} />}</div>
+                  </div>
+                  <div className="grid gap-1 items-center overflow-y-hidden">
+                    <h2 className="text-sm font-light font-roboto text-[#878787]">
+                      Titles
+                    </h2>
+                    <div className="grid grid-flow-dense grid-cols-2 gap-2 h-full w-full">
+                      {data ? (
+                        <>
+                          <div className="line-clamp-3">
+                            {data.title.romaji || ""}
+                          </div>
+                          <div className="line-clamp-3">
+                            {data.title.english || ""}
+                          </div>
+                          <div className="line-clamp-3">
+                            {data.title.native || ""}
+                          </div>
+                        </>
+                      ) : (
+                        <Skeleton width={200} height={50} />
+                      )}
+                    </div>
+                  </div>
+                </div>
               </div>
-            </div>
-            <div className="flex flex-col w-screen lg:w-[35%] ">
-              <h1 className="text-xl font-karla pl-4 pb-5 font-semibold">
-                Up Next
-              </h1>
-              <div className="flex flex-col gap-5 lg:pl-5 px-2 py-2 scrollbar-thin scrollbar-thumb-[#313131] scrollbar-thumb-rounded-full">
-                {data && data?.episodes.length > 0 ? (
-                  episode.map((item, index) => {
-                    return (
-                      <Link
-                        href={`/id/anime/watch/${data.id}/${item.episodeId}`}
-                        key={item.id}
-                        className={`bg-secondary flex-center w-full h-[50px] rounded-lg scale-100 transition-all duration-300 ease-out ${
-                          index === currentNumber - 1
-                            ? "pointer-events-none ring-1 ring-action text-[#5d5d5d]"
-                            : "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white"
-                        }`}
-                      >
-                        Episode {index + 1}
-                      </Link>
-                    );
-                  })
-                ) : (
-                  <>
-                    {[1].map((item) => (
-                      <Skeleton
-                        key={item}
-                        className="bg-secondary flex w-full h-[110px] rounded-lg scale-100 transition-all duration-300 ease-out"
-                      />
-                    ))}
-                  </>
+              <div className="flex flex-wrap gap-3 px-4 pt-3">
+                {data &&
+                  data.genres.map((item, index) => (
+                    <div
+                      key={index}
+                      className="border border-action text-gray-100 py-1 px-2 rounded-md font-karla text-sm"
+                    >
+                      {item}
+                    </div>
+                  ))}
+              </div>
+              <div className={`bg-secondary rounded-md mt-3 mx-3`}>
+                {data && (
+                  <p
+                    dangerouslySetInnerHTML={{ __html: data.description }}
+                    className={`p-5 text-sm font-light font-roboto text-[#e4e4e4] `}
+                  />
                 )}
               </div>
             </div>
           </div>
+          <div className="flex flex-col w-screen lg:w-[35%] ">
+            <h1 className="text-xl font-karla pl-4 pb-5 font-semibold">
+              Up Next
+            </h1>
+            <div className="flex flex-col gap-5 lg:pl-5 px-2 py-2 scrollbar-thin scrollbar-thumb-[#313131] scrollbar-thumb-rounded-full">
+              {data && data?.episodes.length > 0 ? (
+                episode.map((item, index) => {
+                  return (
+                    <Link
+                      href={`/id/anime/watch/${data.id}/${item.episodeId}`}
+                      key={item.id}
+                      className={`bg-secondary flex-center w-full h-[50px] rounded-lg scale-100 transition-all duration-300 ease-out ${
+                        index === currentNumber - 1
+                          ? "pointer-events-none ring-1 ring-action text-[#5d5d5d]"
+                          : "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white"
+                      }`}
+                    >
+                      Episode {index + 1}
+                    </Link>
+                  );
+                })
+              ) : (
+                <>
+                  {[1].map((item) => (
+                    <Skeleton
+                      key={item}
+                      className="bg-secondary flex w-full h-[110px] rounded-lg scale-100 transition-all duration-300 ease-out"
+                    />
+                  ))}
+                </>
+              )}
+            </div>
+          </div>
         </div>
-      </SkeletonTheme>
+      </div>
     </>
   );
 }